//获取浏览器中保存的用户的信息
var userinfo=JSON.parse(localStorage.getItem('userinfo'))
//将其渲染到页面上
document.querySelector('.username').innerHTML=userinfo.name

//获取搜索框和输入框
let inputs=document.querySelector('.input')
var search=document.querySelector('.button')
// console.log(inputs);
//给搜索框绑定点击事件
search.onclick=function(){
    //触发点击事件之后发送请求
    axios.get('/user/search',{params:{searchkey:inputs.value}}).then((res)=>{
        // console.log(res.data);
        //进行渲染` 11
        render(res.data.list)
    })
}

// //点击删除：利用事件委托
// var tr=document.querySelector('.we')
// //绑定点击事件
// tr.onclick=(e)=>{
//   e.target
// }

//拿到数据后进行渲染
function render(data){
    var str=``
    str=data.map((item,index)=>{
        return`
        <tr>
        <td>${item.email}</td>
        <td>${item.name}</td>
        <td>${item.phone}</td>
        <td>${item.ingroup}</td>
        <td>${item.isadmin?'是':'否'}</td>
        <td><button class='${item.status?'':'red'}'>${item.status?'正常':'异常'}</button></td>
        <td>
            <span class="iconfont icon-bianji"></span>
            <span class="iconfont icon-shanchu"></span>
        </td>
        </tr>
        `
    }).join('')
    if(str==''){
        alert('未查询到该用户')
        str=`<span style="margin-left:400px; margin-top=100px;color:red;">未找到该用户</span>`
    }
    document.querySelector('tbody').innerHTML=str
}



//前端发送请求
//axios是从axios.min.js中暴露的，用来发送ajax请求的一个对象
//传参：get传参要有params属性，在params中写传递的参数
axios.get('/user/list',{params:{page:1,count:2}}).then((res)=>{
    console.log(res.data);
    //调用render方法，传入后端返回的数据，完成渲染,data是一个对象，只有数组才能使用map方法，所以这儿使用res.data.list
    render(res.data.list)
})
